/**
 * 日历表格主体td自定义组件
 * Created by wjxu on 2018/6/15
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment/moment';

export class CalendarTd extends Component {
  getClassName() {
    const { customTd, className } = this.props;
    const cusStyle = customTd ? 'custom' : 'normal';
    const disStyle = this.isDsiabledDay() ? 'calendar-day-disabled' : '';
    return `calendar-td-${cusStyle} ${disStyle} ${className}`;
  }
  setDetail() {
    const { customTd, children } = this.props;
    const date = this.getDate();
    const dayOfMonth = date.replace(/^\d{6}0?/, '');
    return customTd && !this.isDsiabledDay() ? children : dayOfMonth;
  }
  getDate() {
    const { date } = this.props;
    return date ? moment(date, 'YYYYMMDD').format('YYYYMMDD') : '';
  }
  getEndDate() {
    const { endDate } = this.props;
    return endDate ? moment(endDate, 'YYYYMMDD').format('YYYYMMDD') : '';
  }
  isDsiabledDay() {
    const date = this.getDate();
    const endDate = this.getEndDate();
    const disabledDay = endDate !== '' ? endDate : 0;
    const currDay = date !== '' ? date : 0;
    return Number(currDay) >= Number(disabledDay);
  }
  render() {
    return (
      <td className={this.getClassName()} data-date={this.getDate()}>{this.setDetail()}</td>
    );
  }
}

CalendarTd.propTypes = {
  date: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(moment),
  ]),
  customTd: PropTypes.bool,
  children: PropTypes.element,
  className: PropTypes.string,
  endDate: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(moment),
  ]),
};

CalendarTd.defaultProps = {
  date: '',
  customTd: false,
  children: <div className="calendar-td-nodata" />,
  className: '',
  endDate: '',
};

export default CalendarTd;
